<template>
      <div class="container">
        <h2>光遇季节<br>____________________________</h2>
        <div class="desc">
        <ul>
        <li v-for="(item, index) in pwd2" :key="index"> 
            
              <img :src="getImgUrl(item.imgs)" alt="" >
              
              <span>{{ item.id }}</span>
             
         
        </li>
        </ul>
        </div>
      </div>
    
    
    
    </template>
    
  <script>
  import axios from 'axios'
  import { ref, onMounted } from 'vue'
  //用setup函数
  export default {
    setup() {
      //用ref定义数据
      const pwd2 = ref(null)
      //定义方法，用于获取图片路径，不能用require,因为版本问题
      const getImgUrl = (imgs) => {
        //用相对路径
        return new URL('../assets/img/' + imgs, import.meta.url).href
      }
      //组件创建完成后执行,挂载完毕
      onMounted(() => {
        axios.get('../public/pwd2.json')
         .then(response => {
            pwd2.value = response.data
          })
         .catch(error => {
            console.log(error)
          })
      })
      return {
        pwd2,
        getImgUrl
      }
    }
}
  

  /*用data，methods，mounted三个方法
  export default {
      data () {
        return {
          pwd2: null,
        }
      },
      //组件创建完成后执行,挂载完毕
      mounted () {
        axios.get('../public/pwd2.json')
          .then(response => {
            this.pwd2 = response.data
          })
          .catch(error => {
            console.log(error)
          })
          console.log('挂载完毕')
      },
      methods: {
        //定义方法，用于获取图片路径，不能用require,因为版本问题
        getImgUrl: function (imgs) {
            //用相对路径
            return new URL('../assets/img/' + imgs, import.meta.url).href
      }
    }
    }*/
    
    
    </script>
    
    <style scoped>
    h2{
        font-family: "华文琥珀";
        font-size: 40px;
        color: #FF6600;
        font-weight: normal;
    }
    
    
    
    
    span{
            font-size: 20px;
            font-family: 隶书;
            color: #333333;
            margin-top: 10px;
            align-self: left;
            float: right;
    
            width: 400px;
            height: 140px;
        }
    .desc ul{
        display: flex;/*设置ul为flex布局*/
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .desc li{
        list-style: none;
        margin-bottom: 20rpx;
        position: relative;
        width: 630px;
        height: 160px;
        font-size: 0px;
        
    }
    img{
        width: 200px;
        height: 150px;
        margin-bottom: 10px;/*图片间距*/
    }
    
    
    </style>